<link rel="import" href="packages://inspector/share/meta-header.html">

<dom-module id="spine-inspector">
    <link rel="import" type="css" href="packages://inspector/share/common.css">

    <template>
        <inspector-meta-header
            target="[[target]]"
            icon="unpack://engine/extensions/spine/editor/spine-asset.png"
            dirty="{{dirty}}"
        >
        </inspector-meta-header>

        <div class="props flex-1">
            <editor-custom-prop name="Atlas Texture">
                <fire-asset class="flex-1" value="{{target.texture}}" type="texture" >
                </fire-asset>
            </editor-custom-prop>
            <!--<editor-custom-prop name="Atlas Textures">-->
                <!--<template is="dom-repeat" items="{{target.textures}}">-->
                    <!--<fire-asset class="flex-1" value="{{item}}" type="texture" >-->
                    <!--</fire-asset>-->
                <!--</template>-->
            <!--</editor-custom-prop>-->

            <editor-custom-prop name="Scale" title="This can be useful when using different sized images than were used when designing the skeleton in Spine. For example, if using images that are half the size than were used in Spine, a scale of 0.5 can be used. This is commonly used for games that can run with either low or high resolution texture atlases.">
                <editor-unit-input value="{{target.scale}}"
                ></editor-unit-input>
            </editor-custom-prop>
        </div>
    </template>

    <script>
        Editor.registerElement({
            properties: {
                target: {
                    type: Object,
                    value: null,
                    notify: true,
                },
            },
        });
    </script>
</dom-module>
